<template>
  <div class="insview">
    <HeaderView />
    <div class="insMain" ref="insMain">
      <div class="content">
        <!-- 下拉刷新 -->
         <div class="updown">
        <div v-show="isUpdowm">下拉刷新</div>
        <div v-show="!isUpdowm">
          <div v-show="isLoad">加载中...</div>
          <div v-show="!isLoad">请求成功...</div>
        </div>
      </div>
        <div class="insItem"  v-for="item in insList" :key="item.id">
        <NewestItem  :itemObj="item" />
        </div>
        <!-- 上拉触底 -->
        <div class="more">
        <div v-show="isMore">正在加载中...</div>
        <div v-show="!isMore">没有更多数据了</div>
      </div>
      </div>
    </div>
    <TabBar />
  </div>
</template>

<script>
// 引入BScroll
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down'
import HeaderView from '@/components/HeaderView'
import TabBar from '@/components/tabBar/TabBar'
import NewestItem from '@/components/NewestItem'
import { getInsFun } from '@/network/innerAxios'
BScroll.use(PullDown)
BScroll.use(Pullup)
export default {
  data () {
    return {
      insList: [],
      isLoad: true,
      isUpdowm: true,
      isMore: false,
      bscroll: null,
      page: 1,
      resData: []
    }
  },
  components: {
    HeaderView,
    TabBar,
    NewestItem
  },
  async mounted () {
    await this.getIlsData()
    this.initscroll()
  },
  methods: {

    // 初始化
    initscroll () {
      // 第一个需要绑定dom对象用ref来绑定this.$refs.insMain
      this.bscroll = new BScroll(this.$refs.insMain, {
        pullUpLoad: true,
        pullDownRefresh: true,
        click: true
      })
      this.bscroll.on('pullingUp', this.pullupFun)
      // 下拉刷新
      this.bscroll.on('pullingDown', this.pullDowFun)
    },
    // 下拉刷新
    pullDowFun () {
      this.isUpdowm = false
      setTimeout(async () => {
        this.page = 1
        // 将数组清空
        this.insList = []
        await this.getIlsData()
        this.isLoad = false
        setTimeout(() => {
          this.bscroll.finishPullDown()
          this.isLoad = true
          this.isUpdowm = true
        }, 1000)
      }, 1000)
      this.bscroll.refresh()
    },
    // 触底加载
    async pullupFun () {
      this.isMore = true
      if (!this.resData.length) {
        this.bscroll.finishPullUp()
        this.isMore = false
        return
      }
      this.page++
      await this.getIlsData()
      this.bscroll.finishPullUp()
      this.bscroll.refresh()
    },
    async getIlsData () {
      await getInsFun(this.page).then(res => {
        console.log(res.data)
        const oldList = this.insList
        const nsList = oldList.concat(res.data)
        this.insList = nsList
        this.resData = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.insMain{
  padding:0 0.2rem;
  height:calc(100vh - 2rem);
  border: .03rem solid #bfa;
  overflow: hidden;
  box-sizing: border-box;
  .content{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .insItem{
      width: 48%;
      padding-top:0.2rem ;
    }
    .more ,.updown{
    font-size: 0.28rem;color:#888;
    text-align: center;
    line-height: 0.5rem;
    height: 1rem;
    width: 100%;
  }
  .updown{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    line-height:  1.4rem;
    transform: translateY(-100%)
  }
  }
}
</style>
